/* 滚动时钟组件 */

.ScrollClock {
    --controlLen: 414;
    /* 组件宽度 */
    --SCBWide: calc(var(--controlLen, 414) * 1px * 0.45);
    /* 组件高度 */
    --SCBHigh: calc(var(--SCBWide) * 0.2391);
    /* 符号宽度 */
    --SCBSignWide: calc(var(--SCBWide) * 0.1359);
    /* 边宽度 */
    --SCBNLBorderWide: calc(var(--SCBWide) * 0.0109);
    /* 字体大小 */
    --SCBFontSize: calc(var(--SCBWide) * 0.1087);

    /* 边框颜色 */
    --SCBNLBorderColor: var(--iconWhite, rgba(245, 245, 245, 1));
    /* 字体颜色 */
    --SCBFontColor: var(--FontLightBlack, rgba(119, 131, 143, 1));

    width: fit-content;
    position: relative;
}

.ScrollClock .clickPoint {
    display: none;
}

/* 开始计时时覆盖，防止多余操作 */
.ScrollClock .overHidden {
    position: absolute;
    width: 100%;
    height: 0;
}

.ScrollClock .scrollClockBox {
    display: flex;
    font-size: var(--SCBFontSize);
    font-weight: 700;
    color: var(--SCBFontColor);
}

.ScrollClock .numberList {
    display: flex;
    flex-direction: column;

    width: var(--SCBHigh);
    height: var(--SCBHigh);

    border-radius: calc(var(--SCBHigh) * 0.2273);
    border: var(--SCBNLBorderWide) solid var(--SCBNLBorderColor);

    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-width: none;
    /* scroll-snap-type: y mandatory; */
}

.ScrollClock .numberList::-webkit-scrollbar {
    display: none;
}

.ScrollClock .numberBox {
    display: flex;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start;

    flex-shrink: 0;
    width: 100%;
    height: 100%;
}

.ScrollClock .signBox {
    display: flex;
    align-items: center;
    justify-content: center;

    width: var(--SCBSignWide);
    height: var(--SCBHigh);

    transition: all 0.5s ease-in-out;
}